/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<view class="nav">
			<view @tap="changeTab" class="nav-item" :class="[order_status==''?'red':'']" data-id="" role="navigation">默认</view>
			<view @tap="changeTab" class="nav-item" :class="[order_status=='start_time'?'red':'']" data-id="start_time" role="navigation">
				最新
				<view class="ico-dg">
					<image class="wh100" :src="imgUrl+'index/dg.png'" role="img"></image>
				</view>
			</view>
			<view @tap="changeTab" class="nav-item" :class="[order_status=='comment_count'?'red':'']" data-id="comment_count" role="navigation">
				评论数
				<view class="ico-dg">
					<image class="wh100" :src="imgUrl+'index/dg.png'" role=" img"></image>
				</view>
			</view>
		</view>
		<image class="group-purchase" :src="hostUrl+ad.ad_code" role="img"></image>
		
		<view class="choice_box">
			<block v-for="(item,index) in groupData" :key="index" v-if="groupData.length>0">
				<navigator class="choice_item" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+ item.goods_id" role="navigation">
					<view class="img-wrap">
						<image :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType" role="img"></image>
						<view class="discount">{{item.rebate}}折</view>
					</view>
					<view class="title">{{item.goods_name}}</view>
					<view class="involved">{{item.sales_sum}}人参与</view>
					<view class="price">￥{{item.shop_price}}</view>
					<view class="count-down">
						<view class="tip-count">剩余</view>
						<view class="tip-count"v-if="endTime.length>0" >{{endTime[index].day}}天{{endTime[index].hou}}时{{endTime[index].min}}分{{endTime[index].sec}}秒</view>
					</view>
				</navigator>
			</block>
			
		</view>
		
	</view>
</template>

<script>
	import {getClassifyAd,getGroup} from "@/api/api.js";
	import config from "@/api/config.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl:config.host,//图片路径前缀
				imgUrl:config.imgUrl,
				ad:"",//广告
				p:1,//默认请求10条
				groupData:[],//团购list
				order:"",//默认排序字段为空
				allTime:[],//全部时时间
				endTime:[],//最终倒计时
				order_status:"",//导航栏状态
				
			};
		},
		computed: {
			...mapState(['goodsImgWidth','goodsImgHeight','imgType'])
		},
		onLoad(){
			this._getClassifyAd(401); //团购页面下 广告图传 534
			
			
		},
		methods:{
			_getClassifyAd(pid){//广告图
				getClassifyAd(pid).then(res=>{
					// console.log(res)
					this.ad=res.records[0];
				}).then(()=>{
					this._getGroup(this.p,this.order)
				})
			},
			_getGroup(p,order){//团购data
				getGroup(p,order).then(res=>{
					console.log(res)
					var timeArr=[];
					res.records.forEach((i,index)=>{
						timeArr.push(i.end_time);
						
					})
					this.groupData=this.groupData.concat(res.records)
					this.total=res.total;
					console.log(timeArr)
					this.allTime=this.allTime.concat(timeArr);
					this.countdown()
					
				})
			},
			changeTab(e){
				this.order_status=e.currentTarget.dataset.id;
				this.p=1;
				this.groupData.length=0;
				let order=e.currentTarget.dataset.id;
				this._getGroup(this.p,order)
			},
			countdown(){
				clearInterval(timer); 
				let timer = setInterval(this.getTime, 1000) 
				
			},
			timeFormat(param) { //小于10的格式化函数
			    return param < 10 ? '0' + param : param;
			  },
			getTime(){//获取时间差
				let endTimeAll=[];
				this.allTime.forEach((i,index)=>{
					var that=this;
					let endTime = i /*结束时间*/
					// console.log(endTime)
					let endTimeList =[] //结束时间list 
					var timestamp=new Date().getTime() / 1000;/*当前时间*/
					let objTime=null;
					if(endTime - timestamp>0){
						
						let time = (endTime - timestamp);
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt(time % (60 * 60 * 24) / 3600);
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						
						
						objTime={
							day:this.timeFormat(day),
							hou:this.timeFormat(hou),
							min:this.timeFormat(min),
							sec:this.timeFormat(sec)
						}
					
					}else{
						objTime={
							day:'00',
							hou:'00',
							min:'00',
							sec:'00'
						}
					}
					
					endTimeAll.push(objTime);
				})
				
				// console.log(endTimeAll)
				this.endTime=endTimeAll;
				// 1576063260524   1576116043
				
			},
			onReachBottom(){//下拉加载数据
				
				if(this.groupData.length===this.total){
					common.toast("none","加载完了",2000)
					 return false;
				}
				this.params.p++;
				this._getGroup(this.p,this.order)
				
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		color: #666;
	}

	.nav-item {
		float: left;
		width: 33.33%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.nav-item .ico-dg {
		width: 32rpx;
		height: 18rpx;
		margin-left: 10rpx;
		line-height: 0;
	}
	.red{
		color: #ff3b3b;
	}
	.group-purchase {
		width: 100%;
		height: 340rpx;
	}

	.choice_box {
		background-color: #f0f2f5;
	}

	.choice_box .choice_item {
		position: relative;
		float: left;
		width: 370rpx;
		margin: 2rpx;
		font-size: 28rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.choice_item .img-wrap {
		position: relative;
		width: 370rpx;
		height: 370rpx;
		overflow: hidden;
	}

	.choice_item .img-wrap image {
		width: 100%;
		height: 100%;
	}

	.discount {
		position: absolute;
		right: 0;
		top: 0;
		width: 78rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background-color: #fc0c4a;
	}

	.choice_item .title {
		margin-top: 16rpx;
		padding: 0 10rpx;
		height: 72rpx;
		line-height: 36rpx;
		color: #333;
		overflow: hidden;
		word-break: break-all;
	}

	.involved {
		font-size: 22rpx;
		padding: 10rpx;
		color: #666;
	}

	.choice_item .price {
		height: 30rpx;
		line-height: 30rpx;
		padding-bottom: 20rpx;
		padding-left: 10rpx;
		color: #ff3b3b;
		font-size: 24rpx;
	}

	.count-down {
		position: absolute;
		right: 0;
		bottom: 20rpx;
		font-size: 22rpx;
		color: #666;
	}
</style>
